<template>
  <div id="articalDetail" v-loading="$store.state.loading">
    <div class="back">
      <div class="back-content" @click="$router.back()">
        <el-button type="primary" style="float: left; margin-bottom: 1%"
          >返回</el-button
        >
      </div>
    </div>
    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="color: #c0c4cc; margin-top: 1px; font-size: 15px"
            >标题: {{ this.title }}</span
          ><br />
          <span style="color: #c0c4cc; margin-top: 2px; font-size: 15px"
            >作者: {{ this.creater }}</span
          ><br />
          <span style="color: #c0c4cc; margin-top: 1px; font-size: 15px"
            >日期: {{ this.date }}</span
          ><br />
        </div>
        <el-card class="box-card-info" style="margin-bottom: 2%">
                <div>
                    {{this.info}}
                </div>
        </el-card>
        <el-card>
            <div class="markdown-body">
              <!-- <VueMarkdown :source="content"  v-highlight></VueMarkdown> -->
              <div v-highlight v-html="content"></div>
            </div>
            <!-- <VueMarkdown  :source="content"></VueMarkdown> -->
        </el-card>
      </el-card>
    </div>
  </div>
</template>

<script>

// import "highlight.js/styles/atom-one-dark.css";
import {marked} from 'marked'
// import VueMarkdown from 'vue-markdown'
import 'github-markdown-css/github-markdown.css'


export default {
  // components:{
  //   VueMarkdown 
  // },
  data() {
    return {
      id: this.$route.query.id,
      title: "",
      content: "",
      creater: "",
      date: "",
      info: "",
    };
  },
  methods: {
    getContent: function () {
      this.loading = true;
      this.$axios.get("/back/front/article/" + this.id).then((res) => {
        let resData = res.data;
        if (resData.code === 200) {
          this.title = resData.data.title;
          this.content = resData.data.content;
          this.creater = resData.data.createBy;
          this.date = resData.data.createDate;
          this.info = resData.data.info;
        } else {
          this.loading = false;
          this.$message({
            message: resData.message,
            type: "error",
          });
        }
      });
    },
  },
  created() {
    this.getContent();
  },
  // computed: {
  //   compiledMarkdown : function () {
  //     return marked ( this.content)
  //   }
  // },
  mounted(){
    marked.setOptions ({
    renderer: new marked.Renderer(),
    gfm: true,
    pedantic: true,
    sanitize: false,
    tables: true,
    breaks: true,
    smartLists: true,
    smartypants: true,
    highlight: function(code) {
      return hljs.highlightAuto(code).value;
    },
    }),
    this.content = marked(this.content)
  }
};

</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin-top: 2%;
  width: 100%;
  height: 100%;
}
.back-content {
  font-size: 20px;
}
.mymarkdown-body hljs-punctuation{
  margin: 2%;
}

</style>